<!--打卡-->
<template>
    <div class="container_Signin" id="app">
        <mt-header fixed title="打卡">
            <mt-button slot="left" icon="back" @click="Returnclick"></mt-button>
        </mt-header>
        <div class="sigin-warn">
            <img src="~/assets/image/lbimg.png" />
            <span>完成一次上下班打卡，可获得{{lastDay.day_quota||0}}元预支额度</span>
        </div>
        <div class="dkshow">
            <div class="dkshow-top">
                <span>上班打卡</span>
                <b></b>
                <span>8小时后</span>
                <b></b>
                <span>下班打卡</span>
            </div>
            <div class="dkshow-buts">
                <span :class="{alyel : timesdata.morningCheck == 0 }">{{timesdata.morningCheck > 0 ? timesdata.morningTime :'未打卡'}}</span>
                <span :class="{alyel : timesdata.afterCheck == 0 }">{{timesdata.afterCheck > 0 ? timesdata.afterTime :'未打卡'}}</span>
            </div>
            <div class="dkshows-warn" v-if="timesdata.morningCheck == 1 && timesdata.afterCheck == 0">{{timesdata.msg}}</div>
            <div class="dkshows-warn" v-else-if="timesdata.afterCheck == 0 && longitude && latitude && checkGeo===0">您当前不在考勤范围内</div>
        </div>
        <div class="operationdiv">
            <div class="widthfixe" v-if="timesdata.morningCheck == 0 ">
                <span class="sapnbackyellow" @click="Location"></span>
            </div>
            <div class="widthfixe" v-if="timesdata.morningCheck == 1 && timesdata.afterCheck == 0">
                <span class="sapnbackyellow sapnbackblue" @click="Gowork"></span>
            </div>
            <div class="widthfixe" v-if="timesdata.morningCheck == 1 && timesdata.afterCheck == 1">
                <span class="sapnbackyellow sapnbackblank"></span>
            </div>
        </div>
        <div class="sigintopback">
            <span>{{timesdata.yearMonth}}&nbsp;{{timesdata.time}}</span>
            <p>• 每周六管理员会对打卡获取的额度进行审核，审核通过后即可消费或提现。</p>
            <p>• 暂不支持跨天打下班卡。</p>
        </div>
        <div class="recorddiv" @click="Recordlist(1)">
            <span class="record want"></span>
            <span>我要补卡</span>
            <span class="fa fa-angle-right"></span>
        </div>
        <div class="recorddiv" @click="Recordlist(2)">
            <span class="record wantcord"></span>
            <span>补卡记录</span>
            <span class="fa fa-angle-right"></span>
        </div>
        <div class="recorddiv" @click="Recordlist(3)">
            <span class="record"></span>
            <span>打卡记录</span>
            <span class="fa fa-angle-right"></span>
        </div>
    </div>
</template>
<script>
import os from '~/assets/api/os'
import app from '~/assets/api/config'
// import { MP } from '~/assets/api/map'
 

export default {
    data() {
        return {
            lastDay: {},
            longitude: '', //经度
            latitude: '', //纬度
            timesdata: [], //时间数据,
            checkGeo: 1,
            location: '',
            result: ''
        }
    },
    created() {
        this.fatchBillDay()

        global.set_location = result => {
            // console.log(result);
            this.location = result
            return '成功'
        }
    },
    beforeRouteLeave(to, from, next) {
        this.$MessageBox.close(false)
        // this.$nextTick(() => {
        //     let sNode = document.getElementsByTagName('iframe')[
        //         document.getElementsByTagName('iframe').length - 1
        //     ]
        //     sNode.parentNode.removeChild(sNode)
        //     document.getElementById('app').parentNode.className = ''
        // })
        next()
    },
    mounted() {
        global.needLoading = true

        this.$Indicator.open({
            text: '加载中...',
            spinnerType: 'fading-circle'
        })

        this.gettimes()
        this.$nextTick(() => {
            document.getElementById('app').parentNode.className = 'signpart'
            this.addressDetail()
        })
    },
    methods: {
        Returnclick() {
            // 返回
            this.$router.go(-1)
            // console.log(99);
        },
        fatchBillDay() {
            this.$axios
                .post(app.API_BES_URL + '/api/backend/v1/bill/getPtDay')
                .then(({ data }) => {
                    // console.log(data);
                    if (!data.code) {
                        // console.log(data.data);
                        this.lastDay = data.data
                    }
                })
        },
        addressDetail() {
            // 获取地理位置
            var _this = this
            if (os.isAndroidLxkApp()) {
                const location = global.control.getLocation()
                _this.location = location
            } else if (os.isIosLxkApp()) {
                global.webkit.messageHandlers.get_location.postMessage('')
                //然后IOS会直接设置location
            } else {
                /* MP('9isUUqjuf0HkHgIvmu8KYNGqzeLG47y8').then(BMap => {
                    var geolocation = new BMap.Geolocation()
                    geolocation.getCurrentPosition(function(r) {
                        _this.longitude = r.longitude
                        _this.latitude = r.latitude
                        // if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        //     var myGeo = new BMap.Geocoder();
                        //     myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
                        //         if (result) {
                        //             self.longitude = result.point.lng;
                        //             self.latitude = result.point.lat;
                        //         }
                        //     });

                        // }

                        this.$axios
                            .post(
                                app.API_BES_URL +
                                    '/api/backend/v1/checkin/checkinRange',
                                {
                                    longitude: r.longitude,
                                    latitude: r.latitude
                                }
                            )
                            .then(result => {
                                if (result.data.data == 2) {
                                    _this.checkGeo = 0
                                }
                                this.$Indicator.close()
                                global.needLoading = true
                            })
                            .catch(msg => {
                                this.$Indicator.close()
                                global.needLoading = true
                            })
                    })
                }) */
            }
        },
        Location() {
            // 上班打卡
            global.needLoading = false

            this.$Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            })
            this.$axios
                .post(app.API_BES_URL + '/api/backend/v1/checkin/getTimeList')
                .then(res => {
                    if (res.data.code == 0) {
                        this.timesdata = res.data.data
                        if (this.timesdata.morningCheck == 0) {
                            this.$axios
                                .post(
                                    app.API_BES_URL +
                                        '/api/backend/v1/checkin/checkInMorning',
                                    {
                                        longitude: this.longitude,
                                        latitude: this.latitude
                                    }
                                )
                                .then(res => {
                                    this.$Indicator.close()
                                    global.needLoading = true

                                    if (res.data.code == 0) {
                                        this.gettimes()
                                        let htmmls =
                                            '<div style="text-align: center;margin-top: 67.5px">' +
                                            '<span class="morningimg"></span>' +
                                            '<span style="display: block;margin-top: 0.3rem;font-size: 0.5rem;color: #f9c847;">今日上班已签到!</span>' +
                                            '<span style="display: block;font-size: 0.5rem;margin-top: 0.5rem;color: #666666">下班不要忘记打卡哟</span>' +
                                            '</div>'
                                        this.$MessageBox({
                                            title: '',
                                            message: htmmls,
                                            showCancelButton: false,
                                            confirmButtonClass: 'thatstrue',
                                            confirmButtonText: '确认'
                                        }).then(action => {
                                            if (action == 'confirm') {
                                            }
                                        })
                                    } else {
                                        this.timesdata.morningCheck = 0
                                        let errhtm = res.data.msg
                                        this.errorGPS(errhtm)
                                    }
                                })
                        }
                    } else {
                        this.$Indicator.close()
                        global.needLoading = true
                        this.$Toast(res.data.msg)
                    }
                })
        },
        Gowork() {
            // 下班打卡
            global.needLoading = false

            this.$Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            })

            this.$axios
                .post(app.API_BES_URL + '/api/backend/v1/checkin/getTimeList')
                .then(res => {
                    if (res.data.code == 0) {
                        this.timesdata = res.data.data
                        if (
                            this.timesdata.morningCheck == 1 &&
                            this.timesdata.afterCheck == 0
                        ) {
                            this.$axios
                                .post(
                                    app.API_BES_URL +
                                        '/api/backend/v1/checkin/checkInAfter',
                                    {
                                        longitude: this.longitude,
                                        latitude: this.latitude
                                    }
                                )
                                .then(res => {
                                    this.$Indicator.close()
                                    global.needLoading = true
                                    if (res.data.code == 0) {
                                        this.gettimes()
                                        let htmmls = ''
                                        if (
                                            res.data.data.day <=
                                            this.lastDay.newbie_day
                                        ) {
                                            htmmls =
                                                '<div style="text-align: center;margin-top: 67.5px">' +
                                                '<span class="netingback"></span>' +
                                                '<span style="display: block;margin-top: 0.3rem;font-size: 0.5rem;color: #f9c847;">' +
                                                res.data.data.msg1 +
                                                '</span>' +
                                                '<span style="display: block;font-size: 0.4rem;margin-top: 0.4rem;color: #666666">' +
                                                res.data.data.msg2 +
                                                '</span>' +
                                                '</div>'
                                        } else if (
                                            res.data.data.day >
                                            this.lastDay.newbie_day
                                        ) {
                                            htmmls =
                                                '<div style="text-align: center;margin-top: 67.5px">' +
                                                '<span class="netingback"></span>' +
                                                '<span style="display: block;margin-top: 0.3rem;font-size: 0.5rem;color: #f9c847;">您当前有可用额度</span>' +
                                                '<span style="display: block;font-size: 0.4rem;margin-top: 0.4rem;color: #f9c847">' +
                                                '￥' +
                                                '<strong style="font-size: 0.5rem;">' +
                                                res.data.data.money +
                                                '</strong>' +
                                                '</span>' +
                                                '</div>'
                                        }
                                        this.$MessageBox({
                                            title: '',
                                            message: htmmls,
                                            showCancelButton: false,
                                            confirmButtonClass: 'thatstrue',
                                            confirmButtonText: '确认'
                                        }).then(action => {
                                            if (action != 'confirm') {
                                            }
                                        })
                                    } else {
                                        this.timesdata.afterCheck = 0
                                        let errhtm = res.data.msg
                                        this.errorGPS(errhtm)
                                    }
                                })
                        }
                    } else {
                        this.$Indicator.close()
                        global.needLoading = true
                        this.$Toast(res.data.msg)
                    }
                })
        },
        errorGPS(errhtm) {
            //签到失败
            let htmmls =
                '<div style="text-align: center">' +
                '<span class="imgsbacn"></span>' +
                '<span style="display: block;margin-top: 0.3rem;font-size: 0.6rem;color: #f9c847;"打卡失败</span>' +
                '<span style="display: block;font-size: 0.45rem;margin-top:0.2rem;">' +
                errhtm +
                '</span>' +
                '</div>'
            this.$MessageBox({
                title: '',
                message: htmmls,
                showCancelButton: false,
                confirmButtonClass: 'thatstrue',
                confirmButtonText: '确认'
            }).then(action => {
                if (action == 'confirm') {
                }
            })
        },
        Recordlist(val) {
            if (val == 1) {
                // console.log(this.longitude+','+this.latitude);
                this.$router.push({
                    name: 'applySign',
                    query: {
                        longitude: this.longitude,
                        latitude: this.latitude
                    }
                })
            } else if (val == 2) {
                console.log(9);
                this.$router.push({ name: 'signRecord' })
            } else if (val == 3) {
                this.$router.push({ name: 'supplementRecord' })
            }
        },
        gettimes() {
            //获取时间
            this.$axios
                .post(app.API_BES_URL + '/api/backend/v1/checkin/getTimeList')
                .then(res => {
                    if (res.data.code == 0) {
                        this.timesdata = res.data.data
                    }
                })
        }
    },
    watch: {
        location() {
            if (this.location) {
                const _this = this
                const temp = this.location.split(',')
                const longitude = temp[0] || ''
                const latitude = temp[1] || ''
                /* MP('9isUUqjuf0HkHgIvmu8KYNGqzeLG47y8').then(BMap => {
                    const convertor = new BMap.Convertor()
                    convertor.translate(
                        [new BMap.Point(longitude, latitude)],
                        1,
                        5,
                        data => {
                            const point = data.points[0]
                            const longitudeTransformed = point.lng
                            const latitudeTransformed = point.lat

                            _this.longitude = longitudeTransformed.toString()
                            _this.latitude = latitudeTransformed.toString()

                            this.$axios
                                .post(
                                    app.API_BES_URL +
                                        '/api/backend/v1/checkin/checkinRange',
                                    {
                                        longitude: _this.longitude,
                                        latitude: _this.latitude
                                    }
                                )
                                .then(result => {
                                    this.$Indicator.close()
                                    global.needLoading = true

                                    if (result.data.data == 2) {
                                        _this.checkGeo = 0
                                    }
                                })
                                .catch(msg => {
                                    this.$Indicator.close()
                                    global.needLoading = true
                                })
                        }
                    )
                }) */
            } else {
                this.$Indicator.close()
                global.needLoading = true
            }
        }
    }
}
</script>


<style scoped lang="less">
.container_Signin {
    width: 100%;
    margin: 0 auto;
    .sigintopback {
        background: #fff;
        padding-bottom: 30px;
        border-bottom: 1.25px solid #eee;
        margin-bottom: 21px;
        span {
            display: block;
            text-align: center;
            color: #757575;
            font-size: 30px;
            margin-bottom: 37.5px;
        }

        p {
            display: block;
            padding-left: 40px;
            padding-right: 40px;
            color: #757575;
            font-size: 28px;
            line-height: 48px;
        }
    }

    .sigin-warn {
        background: #fff8d0;
        border-bottom: 1.25px solid #eeeeee;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 17.5px 30px;
        margin-top: 80px;
        img {
            display: block;
            width: 30px;
            height: 30px;

            margin-right: 30px;
        }

        span {
            display: block;
            font-size: 28px;
            color: #595959;
        }
    }

    .dkshow {
        background: #fff;
        .dkshow-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 68px 68px 0 68px;
            span {
                display: block;
                width: 150px;
                text-align: center;
                color: #2e2e2e;
                font-size: 32px;
            }

            b {
                display: block;
                width: 71px;
                height: 2.5px;
                background: #a9a9a9;
            }
        }

        .dkshow-buts {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 34px 68px 0 68px;
            span {
                display: block;
                width: 150px;
                text-align: center;
                color: #757575;
                font-size: 28px;
            }

            .alyel {
                color: #f7ba42;
            }
        }

        .dkshows-warn {
            text-align: center;
            color: #ff0000;
            font-size: 28px;
            padding-top: 20px;
        }
    }

    .operationdiv {
        width: 100%;
        float: left;
        padding: 37.5px 0 0;
        background: #fff;
        margin-bottom: 15px;
        display: flex;
        justify-content: center;
        .widthfixe {
            width: 50%;
            text-align: center;
            span {
                display: block;
            }

            .sapnbackyellow {
                background: url('../assets/image/circularyellow.png') no-repeat;
                background-size: 100%;
                letter-spacing: 5px;
                width: 295px;
                height: 295px;
                line-height: 295px;
                color: #fff;
                font-size: 37.5px;
                font-weight: 550;
                margin: 0 auto;
            }

            .sapnbackblue {
                background-image: url('../assets/image/circularblue.png');
            }

            .sapnbackblank {
                background-image: url('../assets/image/circularblank.png');
            }
        }
    }

    .recorddiv {
        float: left;
        width: 100%;
        border-top: 1.25px solid #eee;
        background: #fff;
        padding: 22.5px 0;
        .record {
            background: url('../assets/image/record.png') no-repeat;
            background-size: 100%;
            width: 43.75px;
            height: 43.75px;
            float: left;
            margin-left: 22.5px;
            margin-right: 30px;
        }

        .want {
            background-image: url('../assets/image/wants.png');
        }

        .wantcord {
            background-image: url('../assets/image/wantcord.png');
        }

        .fa-angle-right {
            float: right;
            margin-right: 22.5px;
            font-size: 45px;
            color: #999;
        }
    }
}
</style>
<style>
html,
body {
    background: #f8f8f9;
}
.goushop {
    color: #f06f38 !important;
    border-radius: 0 0 0 30px;
}

.thatstrue {
    margin: 0 auto !important;
    display: block !important;
    color: #333 !important;
    width: 90% !important;
    height: 69px !important;
    border-radius: 62.5px;
    flex: none !important;
    box-flex: none !important;
    font-size: 31.25px !important;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffdf00',endColorStr='#ffcd00',gradientType='1');
    background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
    background: -o-linear-gradient(left, #ffdf00, #ffcd00);
    background: -webkit-gradient(
        linear,
        0% 0%,
        100% 0%,
        from(#ffdf00),
        to(#ffcd00)
    );
}

.signpart .mint-msgbox {
    border-radius: 15px !important;
    overflow: visible !important;
}

.imgsbacn {
    background: url('../assets/image/erroico.png') no-repeat;
    background-size: 100%;
    display: block;
    width: 225px;
    height: 262.5px;
    margin: 0 auto;
}

.morningimg {
    background: url('../assets/image/morning.png') no-repeat;
    background-size: 100%;
    width: 115%;
    height: 225px;
    position: absolute;
    left: -28.5px;
    top: -195px;
}

.netingback {
    background: url('../assets/image/morning.png') no-repeat;
    background-size: 100%;
    width: 115%;
    height: 225px;
    position: absolute;
    left: -31.5px;
    top: -195px;
}

.signpart .mint-msgbox-content {
    border: 0 !important;
    overflow: visible !important;
}

.signpart .mint-msgbox {
    width: 62% !important;
}

.mint-header {
    font-size: 0.45rem !important;
    height: 1.173333rem !important;
    background: #fff !important;
    color: #2e2e2e !important;
    border-bottom: 0.016667rem solid #f8f8f8 !important;
}
.mint-header .mintui {
    font-size: 0.45rem;
}
.mint-header-title {
    font-size: 0.426667rem !important;
}
* {
    font-size: 0.45rem;
}
</style>
